<template>
  <div>
    <el-card class="showThisQuestion" @mouseenter.native="mouseIn(item)" @mouseleave.native="mouseOut(item)"
             style="margin:0px;padding: 20px 30px 0px 30px;text-align: left;"
             shadow="never"
             :style="changeEditingCardBorder(item.mouseOnMe,item.isEditing)"
    >
      <div style="margin-bottom: 10px;text-align: left;font-weight: bold;font-size:17px;line-height: 1.3;">
        <span v-show="item.bidati" style="color:red;font-size: 20px;float:left;">* </span>

        <span v-show="autoId">{{id+1}}.</span><span>{{item.title}}</span>
      </div>
      <div v-if="item.note.trim()!=''" style="margin-bottom: 20px;text-align: left;font-size:14px;line-height: 1.3;color:grey">
        说明：{{item.note}}
      </div>
      <div style="padding: 0;margin: 0 0 10px 0;">
        <el-input
            type="textarea"
            :autosize="{ minRows: 1}"
            placeholder=""
            v-model="item.text">
        </el-input>
      </div>


    </el-card>
    <btn-group-on-question
        v-show="item.mouseOnMe||item.isEditing"
        :edit-icon="editOrSaveIcon(item)"
        :edit-tips="editOrSaveWords(item)"
        @editMe="editMe"  @moveUp="moveUp"  @moveUpUp="moveUpUp"  @moveDown="moveDown"
        @copyMe="copyMe" @deleteMe="deleteMe" @moveDownDown="moveDownDown"
    ></btn-group-on-question>
    <!--          填空编辑区-->
    <div v-if="item.isEditing" style="margin:0px auto;padding: 20px 30px 0px 30px;text-align: left;background-color: rgb(241,241,246);">
      <el-form :model="item">

        <add-question-head
            :thisquestion="item"
        ></add-question-head>
      </el-form>
    </div>
  </div>
</template>
<script>
import BtnGroupOnQuestion from "./BtnGroupOnQuestion";
import AddQuestionHead from "./AddQuestionHead";
export default {
  name:'SingleChoice',
  components:{
    BtnGroupOnQuestion,AddQuestionHead
  },
  data(){
    return{

    }
  },
  props:{
    item:Object,
    id:Number,
    editIcon:String,
    autoId:Boolean,
  },
  computed:{
    changeEditingCardBorder(){
      return function (opo,ope){
        if(ope){
          return "border-radius:0px; border:1.5px dotted #2c3e50; background-color: rgb(241,241,246);";
        }else{
          if(opo){
            return "background-color:rgb(241,241,246);";
          }else{
            return "border:none;background-color:white;"
          }
        }
      }
    },
    ifDisable(){
      return function (option){
        return (option.notEditing)? true: false;
      }
    },
    editOrSaveOptionIcon(){
      return function (option){
        return (option.notEditing)?"el-icon-edit":"el-icon-finished";
      }
    },
    editOrSaveIcon(){
      return function (item){
        return (item.isEditing)?"el-icon-finished":"el-icon-edit";
      }
    },
    editOrSaveWords(){
      return function (item){
        return (item.isEditing)?"保存":"编辑";
      }
    },
  },

  methods:{
    mouseIn:function (item){
      this.$set(item,'mouseOnMe',true);
    },
    mouseOut:function (item){
      this.$set(item,'mouseOnMe',false);
    },
    editItemOption:function (opindex,item){
      if(item.options[opindex].notEditing){
        item.options[opindex].notEditing=false;
      }else{
        item.options[opindex].notEditing=true;
      }
    },
    removeItemOption:function (opindex,item){
      let tmp=Object.values({...item.options});
      tmp.splice(opindex,1);
      item.options=tmp;
    },
    addItemOptionAfterMe:function (opindex,item){
      let tmp=Object.values({...item.options});
      let x={};
      x.val='';
      tmp.splice(opindex+1,0,x);
      item.options=tmp;
    },

    editMe:function () {
      this.$emit('editMe');
    },
    moveUp(){
      this.$emit('moveUp');
    },
    moveDown(){
      this.$emit('moveDown');
    },
    moveUpUp(){
      this.$emit('moveUpUp');
    },
    moveDownDown(){
      this.$emit('moveDownDown');
    },
    copyMe(){
      this.$emit('copyMe');
    },
    deleteMe(){
      this.$emit('deleteMe');
    }

  }
}
</script>